<style lang="stylus">
html, body
  margin 0
  height 100%
  display flex
  width 100%
</style>
<style lang="stylus" scoped>
main
  display flex
  flex-direction row
  width 100%

  .L, .R
    display flex
    align-items center
    justify-content center
    height 100%
    flex 1

  .L
    video
      flex 1

  .R
    video
      border 2px solid #000
      width 300px
      height 300px
      display block
      margin auto
</style>

<template lang="pug">
main
  .L
    video(ref="src" autoplay)
  .R
    video(ref="crop" autoplay)
</template>

<script lang="coffee">
import {shallowRef,onMounted} from 'vue'
import Crop from './crop?worker'

export default {
  components: {
  }
  setup:=>
    src = shallowRef()
    crop = shallowRef()
    onMounted =>
      video = await navigator.mediaDevices.getUserMedia({
        video:true
      })
      src.value.srcObject = video

      track = video.getVideoTracks()[0]
      trackProcessor = new MediaStreamTrackProcessor({ track })
      trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' })

      # {value:{offsetWidth:sw,offsetHeight:sh}} = src
      {value:{offsetWidth:cw,offsetHeight:ch}} = crop

      msg = [
        trackProcessor.readable
        trackGenerator.writable
      ]


      x = 100
      y = 150
      (new Crop()).postMessage(
        [
          ...msg
          x
          y
          cw
          ch
        ]
        msg # 移交所有权
      )
      crop.value.srcObject = new MediaStream [trackGenerator]
      return

    return {
      src
      crop
    }

}
</script>
